<template>
  <div class="main">
    <div class="InfoLabelList">
      <header-back></header-back>
      <scroller ref="scrollerBottom" :on-infinite="handleReachButton" noDataText="没有更多数据">
        <div>
          <div style="height:1rem"></div>
          <infoList :newsData="articleInfoList" v-on:listenToNews="goes"></infoList>
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
import { infosLinkLabel } from "~/api/identity";
import infoList from "~/components/infoList";
import headerBack from "~/components/headerBack";
export default {
    head: {
      title: "资讯列表"
    },
  components: {
    infoList,
    headerBack
  },
  data() {
    return {
      articleInfoList: [],
      currentPage: 1
    };
  },
  mounted: function() {
    this.showLabelList();
  },
  methods: {
    showLabelList() {
      let _this = this;
      infosLinkLabel(
          {
            labelId: this.$route.query.type,
            pageNo: this.currentPage,
            pageSize: 10
          }
        )
        .then(res => {
  
          let listData = res.data.articleInfo.data;
          this.listLength = listData.length;
          listData.forEach(item => {
            _this.articleInfoList.push(item);
          });

          _this.$hideLoading();
        })
        .catch(error => {
          _this.$vux.toast.text(error);
        });
    },
    goes(tid) {
        this.commonJs.gopush('../info/infoDetail',tid)

    },

    handleReachButton(done) {
      if (this.listLength) {
        this.currentPage = this.currentPage + 1;
        infosLinkLabel({
           labelId: this.$route.query.type,
            pageNo: this.currentPage,
            pageSize: 10
          })
          .then(res => {
            if (res.code == "0") {
              let newArr = res.data.articleInfo.data;
              this.articleInfoList = this.articleInfoList.concat(newArr);
              this.listLength = newArr.length;
              done();
            }
          });
      } else {
        done(true);
        return;
      }
    },
  }
};
</script>

<style scoped lang="less">
.main {
  width: 100%;
  height: 100vh;
  font-size: 0.3rem;
}

.InfoLabelList {
  width: 7.5rem;
  height: 100vh;
  background: #fff;
}
</style>
